<template>
	<view>
	<view class="card card--full">
	    <view class="card__head">
	        <view class="card__title">
	            公司证件
	        </view>
	    </view>
	    <view class="card__content idcard" >
        <view v-for="(item,index) of idcard_img" class="permutation">
	        <view class="idcard__cell">
	            <view class="idcard__img">
	                <view class="idcard__close" v-if="idcard_img[index].path != ''" @tap="_closeImage(index)"><uni-icons type="clear" color="#FF4C4C" size="24"></uni-icons></view>
	                <image class="idcard__picture"  @tap="_chooseImage(index)" :class="{'idcard__picture--left': idcard_img[index].orientation != 'up'}" :src="idcard_img[index].path ? idcard_img[index].path : '/static/img/company.png'" mode="aspectFill"></image>
	            </view>
	            <view class="idcard__txt">点击上传公司证件{{index+1}}</view>
	        </view>
	   
		</view>
	</view>
	</view>
	 <cpimg ref="cpimg" @result="cpimgOk" @err="cpimgErr"/>
	  <view class="form__cell">
	 	<view class="form__label" @click="addPicture" v-if="adPicture" style="color: #004590;">
	 		<image style="width: 30upx;height: 30upx;margin-right: 5upx;" src="@/static/img/add.png"></image>增加
	 	</view>
	 	<view class="form__label" @click="deletePicture" v-if="dePicture" style="text-align: right;color: #fd2c10;">
	 	   <image style="width: 30upx;height: 30upx;margin-right: 5upx;" src="@/static/img/del.png"></image>删除
	 	</view>
	 </view> 
	</view>
</template>
<script>
	   import cpimg from "@/components/cpimg/cpimg.vue";
	   import { router, toast, check, localStorage } from '@/common/util.js';
	   import {seconduploadPic} from '@/service/getData.js';
	   export default {
		   data() {
			   return{
					adPicture:true,
					dePicture:false,
					indexb:1,//统计idcard_img元素个数
					idcard_img: [{
					   path: '',
					   orientation: 'up'
					}
					],
					picturea:['','','','',''],
		       };
		   },
		   props:{
			   piclist: {
			       type: Array,
				   default () {
				   	return []
				   }
			   },
		   },
		   watch: {
				 piclist(val){
				 	this.getphoto(val);
				 }
		   },
		   methods:{
			   getphoto(val){
				   if(val.length > 0){
					   this.idcard_img = val;
					   this.indexb = val.length;
					   if(this.indexb ==5) {
					   	this.adPicture=false;
					   }
					   if(this.indexb >=2){
					   	this.dePicture=true;
					   }
				   }
			   },
			   addPicture:function(e){
			   	let list={
			       path: '',
			       orientation: 'up'
			   }
			   	this.idcard_img.push(list);
			   	this.indexb=this.indexb+1;
			   	if(this.indexb ==5) {
			   		this.adPicture=false;
			   	}
			   	if(this.indexb >=2){
			   		this.dePicture=true;
			   	}
			   },
			   deletePicture:function(e){
				let indexa =this.indexb-1;
			   	this.idcard_img.splice(indexa , 1);
			   	this.indexb=this.indexb-1;
				this.picturea[indexa]='';
			   	if(this.indexb < 5) {
			   		this.adPicture=true;
			   	}
			   	if(this.indexb < 2){
			   		this.dePicture=false;
			   	}			
			   },
			   _chooseImage(index) {
			       let that = this;
			       if(this.idcard_img[index].path == ''){
			           this.$refs.cpimg._changImg(index);
			       }else{
			           // 查看图片
			           uni.previewImage({
			               current: 0,
			               urls: [this.idcard_img[index].path]
			           });
			       }
			   },
			   cpimgOk(file) {
				   console.log('fdsafuhagikvo');
			       this.idcard_img[file.urlType].path = file.data[0];
			       this.getImageInfo(file.urlType);	
				   toast.loading('图片上传中，请稍后...');
				   seconduploadPic(this.idcard_img[file.urlType].path,{"filetype":"gsfj"}).then(res =>{	
						toast.hideLoading();		
						let pic = eval('('+res.data+')');
						let picture = JSON.parse(pic);
						this.picturea[file.urlType]=picture[0].meslist[0].url;
						this.$emit('picpost',this.picturea);
						console.log(this.picturea);
					});
			   },
			   cpimgErr(e) {
			       toast.show(e);
			   },
			   getImageInfo(index) {
			       let that = this;
			       uni.getImageInfo({
			           src: that.idcard_img[index].path,
			           success: function(info) {
			               if(info.width < info.height){
			                   that.idcard_img[index].orientation = 'left';
			               }
			           }
			       })
			   },
			   _closeImage(index) {
				   this.picturea[index]='';
			       this.idcard_img[index].path = '';
			       this.idcard_img[index].orientation = 'up';
			   },
		   },
		   
	   }
</script>

<style lang="scss">
    @import '@/style/mixin/flex.scss';
    @import '@/style/page/form.scss';
    @import '@/style/page/card.scss';
    @import '@/style/page/empty.scss';
    @import '@/style/page/foot.scss';
    @import '@/style/page/drawer.scss';
	@import '@/style/mixin/hr.scss';
    
    .page{
        padding: 0 0 44px;
    }   
	.permutation{
		display: flex;
		flex-direction: row;
	}
    .form__interval{
        @include flex(null, center);
        @include flex-self(keep);
        padding-right: $uni-spacing-row-base;
    }  
    .formInput__field--interval{
        width: 3em;
        text-align: center;
        font-size:14px;
        padding: 0 $uni-spacing-row-sm;
        color: $uni-text-color-grey;
    }
    .formInput__field + picker.form__icon{
        @include flex-self(keep);
    }   
    .formInput__field + picker.form__icon uni-icons{
        border-left: 1px solid $uni-border-color;
        padding: 0 $uni-spacing-row-base 0 $uni-spacing-row-sm;
    }
	.idcard{
	    flex-wrap: wrap;
	    &__cell{
			
	        width: 320upx;
	    }
	    
	    &__img{
	        position: absolute;
	        width: 308upx;
	        height: 228upx;
			display: block;
	        border-radius: $uni-border-radius-sm;
	        margin-bottom: $uni-spacing-col-sm;
	        border: 1px dashed $uni-border-color;
	    }
	    
	    &__picture{
	        position: absolute;
	        top: 0;
	        left: 0;
	        display: block;
	        width: 308upx;
	        height: 228upx;
	        
	        &--left{
	            width: 228upx;
	            height: 308upx;
	            transform-origin: top left;
	            transform: rotate(90deg) translateY(-308upx);
	        }
	    }	    
	    &__close{
	        position: absolute;
	        top: $uni-spacing-col-sm;
	        right: $uni-spacing-row-sm;
	        z-index: 999;
	    }	    
	    &__txt{
	        text-align: center;
	        font-size: $uni-font-size-sm;
	        color: $uni-text-color-grey;
	    }	    
	    .card__center{
	        @include flex(center, center);
	    }
	}
	.card__foot{
	    position: relative;
	    
	    &::before{
	        @include hr(top, $uni-spacing-row-base);
	    }
	}	
	.checked{
	    @include flex(null, center);
	    padding: 0 $uni-spacing-row-base;
	    
	    &__field{
	        @include flex(null, center);
	        height: 88rpx;
	    }
	}
	.link{
	    color: $color-sub;
	}
</style>




    
  
    
   
    
  